<template>
	<view class="">
		<view class="nav">
			<!-- #ifdef VUE3 -->
			<!-- vue3 -->
			<countDown ref="down" :widths='300' :breadth='40' activeColor='#01B862' defaultColor='#EDF0F0'
				v-model:times='times' :progress_time='progress_time' @endTime='endTime' @pauseNum='pauseNum'>
				<view class="content">自定义内容{{(times/1000).toFixed(0)}}</view>
			</countDown>
			<!-- #endif -->

			<!-- #ifdef VUE2 -->
			<!-- vue2 -->
			<countDown ref="down" :widths='300' :breadth='40' activeColor='#01B862' defaultColor='#EDF0F0' :times.sync='times'
				@endTime='endTime' @pauseNum='pauseNum'>
				<view class="content">自定义内容{{(times/1000).toFixed(0)}}</view>
			</countDown>
			<!-- #endif -->

		</view>

		<view class="btn">
			<view class="btna" @click="startCounting">
				<view class="btn_name">开始</view>
			</view>

			<view class="btna" @click="pause">
				<view class="btn_name">暂停</view>
			</view>

			<view class="btna" @click="goOn">
				<view class="btn_name">继续</view>
			</view>

			<view class="btna" @click="getReset">
				<view class="btn_name">重置</view>
			</view>
		</view>

	</view>
</template>

<!-- #ifdef VUE3 -->
<!-- vue3 -->
<script lang="ts" setup>
	import { ref } from 'vue'
	const times = ref(10000);
	const progress_time = ref(3000);
	const down = ref();

	//开始事件
	const startCounting = () => {
		down.value.start()
	};

	//暂停
	const pause = () => {
		down.value.pause()
	};

	//暂停时返回剩余时间
	const pauseNum = (e ?: any) => {
		console.log('剩余时间：', e);
	};

	//继续
	const goOn = () => {
		down.value.goOn()
	};

	//结束
	const endTime = () => {
		console.log('结束');
	};

	//重置
	const getReset = () => {
		down.value.reset()
	};
</script>
<!-- #endif -->


<!-- #ifdef VUE2 -->
<!-- vue2 -->
<script>

	export default {
		components: {	},
		data() {
			return {
				times: 10000,
			}
		},
		methods: {
			startCounting() { //开始事件
				this.$refs.down.start()
			},
			pause() { //暂停
				this.$refs.down.pause()
			},
			pauseNum(e) { //暂停时返回剩余时间
				console.log('剩余时间：', e);
			},
			goOn() { //继续
				this.$refs.down.goOn()
			},
			endTime() { //结束
				console.log('结束');
			},
			getReset() { //重置
				this.$refs.down.reset()
			},
		}
	}
</script>
<!-- #endif -->

<style lang="scss" scoped>
	.nav {
		margin: 146upx 0 200upx 0;
		display: flex;
		justify-content: center;
	}

	.content {
		font-size: 26upx;
		color: #333;
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: space-around;

		.btna {
			width: 160upx;
			height: 64upx;
			background: #06D368;
			border-radius: 50upx;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn_name {
				font-size: 32upx;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
	}
</style>